
import { ref } from 'vue'
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'

/**
 * 检测可见性，发送请求
 * @param apiFn 发送请求
 * @returns {Object} { list target}
 *  useIntersectionObserver 函数 - 检测元素可见性
        1、stop：一个可执行的函数用来停止监听行为
        2、target（target）：一个由 ref api调用之后形成的RefImpl对象，也可以是一个dom元素
        3、isIntersecting：一个类型为布尔值的数据，当被监听元素进入视口区域时为true，离开视口区域时为false
        特别注意：默认情况下，对于目标 target是否进入视口区域的监听会一直进行
 */
export const useObserver = (apiFn) => {
  // 被检测的目标元素
  const target = ref(null)
  // 商品列表
  const list = ref([])
  // 监测元素可见性
  // stop                 用于停止检测的函数
  // target               被检测的目标元素 / 组件
  // isIntersecting       目标元素是否可见  true / false
  const { stop } = useIntersectionObserver(
    // 被检测的目标元素，可以是组件，也可以是 DOM元素
    target,
    ([{ isIntersecting }]) => {
      // 如果元素可见
      if (isIntersecting) {
        // 获取 商品 数据
        apiFn().then(({ result }) => {
          // console.log('1234result------->', result)
          list.value = result
        })
        // 停止检测
        stop()
      }
    }
  )
  return { list, target }
}

export const useCountDown = (time = 60) => {
  // 定义停止倒计时时间
  const countTime = ref(0)
  // 解构 useIntervalFn返回的函数
  const { resume, pause } = useIntervalFn(() => {
    // 时间自减
    countTime.value--
    // 判断是否为 0 ，如果为 0，则停止定时器
    if (countTime.value <= 0) pause()
    // 设置多少秒执行一次，是否立即执行
  }, 1000, { immediate: false })
  // 开始倒计时，并设置倒计时的出初始值
  const start = () => {
    if (countTime.value <= 0) countTime.value = time
    // 开始定时器
    resume()
  }
  // 关闭定时器
  const stop = () => {
    pause()
  }
  return { countTime, start, stop }
}
